<template>
    <div style="width: 100%">
        <el-card>
            <el-row :gutter="20">
                <el-col :span="5" v-bind="tableHeadTotal" :offset="0">
                    <div style="margin-top: 15px">
                        <el-card :body-style="{ padding: '10px' }" shadow="hover">
                            <div  v-if="tableHeadTotal.well">
								<span style="font-size: 13px">{{ tableHeadTotal.well[0].label }}:{{ tableData.well[0].wellname }}</span
                                ><br/>
                            </div>
                        </el-card>
                    </div>
                </el-col>
            </el-row>
            <el-row :gutter="20" v-if="tableHeadTotal.well">
                <el-col :span="5" v-for="(item, index) in tableHeadTotal.well.slice(1)" :key="index" :offset="4"
                        :pull="4">
                    <div style="margin-top: 15px">
                        <el-card :body-style="{ padding: '10px' }" shadow="hover">
                            <div>
                                <span style="font-size: 13px">{{ item.label }}:{{ tableData.well[0][item.property] }} </span><br/>
                            </div>
                        </el-card>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-row :gutter="20" v-for="(item,index) in tableDataTotal" :key="index">
            <el-col :span="24">
                <el-card style="height: 100%; margin-top: 5px" class="card" shadow="hover">
                    <span style="font-size: 15px; color: #409eff">{{ item.name }}</span>
                    <el-table
                            :data="item.data"
                            border
                            style="width: 100%; font-size: 13px"
                            :max-height="tableHeight"
                            :header-row-style="rowStyle"
                            :header-cell-style="cellStyle"
                            :row-style="rowStyle"
                            :cell-style="cellStyle"
                            stripe
                    >
                        <el-table-column
                                v-for="(itemColumn1, indexColumn1) in tableHeadTotal[item.tableName]"
                                :label="itemColumn1.label"
                                :property="itemColumn1.property"
                                :key="indexColumn1"
                                width="80"
                                show-overflow-tooltip
                                align="center"
                        />
                    </el-table>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {
        GetAllData
    } from '../../api/module/data_report';

    export default {
        data() {
            return {
                browser: '', //数据浏览页面
                management: '', //数据管理页面
                tableHeight: 0,
                rowStyle: { height: '30px' },
                cellStyle: {
                    padding: 0
                    // 'border-bottom': '1px solid #111111',
                    // 'border-right': '1px solid #111111'
                },
                rowData: '',
                wellName: '',
                //所有表格的表头
                tableHeadTotal: {
                    Well: [{
                        id: 1,
                        tableName: 'well',
                        label: '井名',
                        property: 'wellname'
                    }, {
                        id: 2,
                        tableName: 'well',
                        label: '项目单位',
                        property: 'department'
                    }, {
                        id: 3,
                        tableName: 'well',
                        label: '井型',
                        property: 'welltype'
                    }, {
                        id: 4,
                        tableName: 'well',
                        label: '井别',
                        property: 'wellcategory'
                    }, {
                        id: 5,
                        tableName: 'well',
                        label: '开钻日期',
                        property: 'startdrilldate'
                    }, {
                        id: 6,
                        tableName: 'well',
                        label: '完钻日期',
                        property: 'enddrilldate'
                    }, {
                        id: 7,
                        tableName: 'well',
                        label: '设计井深',
                        property: 'welldepth1'
                    }, {
                        id: 8,
                        tableName: 'well',
                        label: '完钻井深',
                        property: 'welldepth2'
                    }, {
                        id: 9,
                        tableName: 'well',
                        label: '完井层位',
                        property: 'finishposition'
                    }],
                    WellStructure: [{
                        id: 1,
                        tableName: 'WellStructure',
                        label: '井身结构ID',
                        property: 'WellStructureID'
                    }, {
                        id: 2,
                        tableName: 'WellStructure',
                        label: '井名',
                        property: 'WellName'
                    }, {
                        id: 3,
                        tableName: 'WellStructure',
                        label: '开钻次序',
                        property: 'NO'
                    }, {
                        id: 4,
                        tableName: 'WellStructure',
                        label: '井深',
                        property: 'WellDepth'
                    }, {
                        id: 5,
                        tableName: 'WellStructure',
                        label: '套管尺寸',
                        property: 'CaseSize'
                    }, {
                        id: 6,
                        tableName: 'WellStructure',
                        label: '套管程序',
                        property: 'CaseProg'
                    }, {
                        id: 7,
                        tableName: 'WellStructure',
                        label: '套管下入层位',
                        property: 'Position'
                    }, {
                        id: 8,
                        tableName: 'WellStructure',
                        label: '下入起始深度',
                        property: 'WellDepth1'
                    }, {
                        id: 9,
                        tableName: 'WellStructure',
                        label: '下入终止深度',
                        property: 'WellDepth2'
                    }, {
                        id: 10,
                        tableName: 'WellStructure',
                        label: '水泥浆返深',
                        property: 'ReturnDepth'
                    }]
                },
                //所有表格的数据
                tableDataTotal: [],
                tableData: {},
                //表名
                tableHeadName: ''
            };
        },
        created() {
            this.getWidth();
            window.onresize = () => {
                this.getWidth();
            };
            //获取页面参数,即上一个页面传递的井名
            this.wellName = this.$route.params.wellName;
            // console.log(this.$route.params.wellName)
        },
        mounted() {
            this.getAllData();
        },
        methods: {
            // 获取宽度
            getWidth() {
                let height = window.innerHeight;
                let width = window.innerWidth;
                if (width >= 1200) {
                    this.tableHeight = height - 130;
                } else {
                    this.tableHeight = height - 290;
                }
                this.rowStyle.height = this.tableHeight / 12 + 'px';
            },
            // 获取所有数据
            getAllData() {
                GetAllData(
                    this.wellName
                )
                .then(res => {
                    console.log('获取所有数据');
                    console.log(res)
                    this.tableHeadTotal = res.tableHeadTotal;
                    console.log(this.tableHeadTotal)
                    this.tableDataTotal = res.tableDataTotal;
                    console.log(this.tableDataTotal)
                    this.tableHeadName = res.tableHeadName;
                    this.tableData = res.tableData;
                })
                .catch(err => {
                    console.log('获取所有数据' + err);
                    this.$message.error('查询出错，请刷新！');
                });
            }
        }
    };
</script>

<style scoped>
    .card >>> .el-card__body {
        padding: 5px;
    }

    .card >>> .el-card__header {
        font-size: 17px;
        padding: 5px 10px;
        /* padding: 5px 10px !important; */
        height: 40px;
        line-height: 30px;
        background-color: #eef0f6;
    }

    .collapse-btn {
        float: right;
        cursor: pointer;
        line-height: 30px;
    }

    .collapse-btn:hover {
        background: rgb(218, 221, 226);
    }

    .el-form-item {
        height: 40px;
        margin: 5px 10px 5px 0;
        width: 90%;
    }
</style>
